<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/bootstrap-icons.css">
  <title>产品落地页平板端-适配第一屏</title>
  <style>
body {
  font-family: Microsoft Yahei,-apple-system,PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
.banner {
  width: 100%;
  background: url(home-banner@2x.jpg) 0% 0% / cover no-repeat;
}
.logo {
  width: 100px;
}
.bg-gray {
  background-color: #f4f4f4 !important;
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: .75rem;
}
@media (min-width: 768px) {
  .logo {
    width: 162px;
  }
  .display-md-6 {
    font-size: 2.25rem !important;
  }
}
  </style>
</head>
<body>

  <div class="banner">
    <header class="container px-4 py-3 d-flex">
      <img src="logo-white.svg" class="logo" alt="logo">
      <div class="btn btn-outline-light px-md-4 ms-auto">登录</div>
      <div class="btn btn-outline-light px-md-4 ms-3">注册</div>
    </header>
    <!--第一屏-->
    <div class="container px-4 py-5 mt-4 text-center">
      <h1 class="display-3 display-md-6  fw-normal text-white mb-3">云端编程，浏览器里边学边练</h1>
      <p class="fs-5 mb-5 text-white">软件定义一切，网络连接时空，学习软件技术，创造未来世界。</p>
      <a class="btn btn-outline-primary bg-body link-primary px-5 py-2 mb-2 fs-5">马上学习</a>
    </div>
  </div>

  <!--图文介绍-->
  <div class="bg-gray">
    <div class="container px-4 py-5">
      <div class="row g-5">
        <div class="col-12">
          <img src="img-lab@2x.png" class="img-fluid">
        </div>
        <div class="col-12">
          <h1 class="display-6 fw-bold mb-3">云端编程实验室</h1>
          <p class="lead">每人拥有自己完全独立的编程实验室，内置所有基础软件及学习素材。打开浏览器，即刻开始编程！</p>
          <div class="d-grid">
            <button type="button" class="btn btn-outline-secondary">了解详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container px-4 py-5">
    <div class="row g-5">
      <div class="col-12">
        <img src="img-screens@2x.png" class="img-fluid">
      </div>
      <div class="col-12">
        <h1 class="display-6 fw-bold mb-3">双屏学习</h1>
        <p class="lead">双屏学习，小屏视频互动，大屏实际操作，学习无障碍。打开浏览器，即刻开始编程！</p>
        <div class="d-grid">
          <button type="button" class="btn btn-outline-secondary">了解详情</button>
        </div>
      </div>
    </div>
  </div>

  <!--课程特色-->
  <div class="container px-4">
    <h2 class="pb-2 border-bottom">课程特色</h2>
    <div class="row g-5 py-5">
      <div class="col-12 d-flex">
        <div class="feature-icon bg-primary bg-gradient flex-shrink-0 me-3">
          <i class="bi bi-collection"></i>
        </div>
        <div>
          <h2>丰富的教学服务</h2>
          <p>特色教学服务功能，各种配套教学服务，在线学习从未如此轻松。</p>
          <a href="javascript:void(0);" class="icon-link">
            马上学习
            <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="col-12 d-flex">
        <div class="feature-icon bg-primary bg-gradient flex-shrink-0 me-3">
          <i class="bi bi-person-circle"></i>
        </div>
        <div>
          <h2>多元的学习方式</h2>
          <p>知识提炼、答疑解惑、实时互动、开发有特色的教学服务方式。</p>
          <a href="javascript:void(0);" class="icon-link">
            马上学习
            <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="col-12 d-flex">
        <div class="feature-icon bg-primary bg-gradient flex-shrink-0 me-3">
          <i class="bi bi-toggles2"></i>
        </div>
        <div>
          <h2>高品质的学习体验</h2>
          <p>多屏合一，随时学习，随时在线，学习记录一目了然，知识充电不再受限。</p>
          <a href="javascript:void(0);" class="icon-link">
            马上学习
            <i class="bi bi-chevron-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-gray py-5 text-center">
    &copy;2021 前沿科技Artech All rights reserved
  </footer>
  <script src="../dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>